<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="./jquery-1.10.2.min.js"></script>
    <script src="./base.js"></script>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .tablist{
            margin: 10px 0;
            text-align: left !important;
            width: 100%;
            height: 100%;
            font-size: 14px;
        }
        .tablist .tab-title{
            position: relative;
            left: 0;
            height: 40px;
            white-space: nowrap;
            /*放到皮肤中设置
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #E4E7ED; */
        }
        .tablist .tab-title li {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            line-height: 40px;
            /* min-width: 65px; */
            padding: 0 15px;
            text-align: center;
            cursor: pointer;
        }
        .tablist .tab-content {
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            /* padding: 10px; */
        }
        .tablist .tab-content .tab-item{
            display: none;
        }
        .tablist .tab-content .tab-show{
            display: block !important;
        }
        .tablist .ul-list{
            margin: 0;
            padding: 0;
            border-top: 1px solid #E4E7ED;
        }
        .tablist .ul-list .ul-li {
            padding: 10px 15px;
            border-bottom: 1px solid #E4E7ED;
            cursor: pointer;
        }
        .tablist .ul-li input[type='checkbox'] {
            /*隐藏掉原先实际的 checkbox 框，之所以没用 display:none; 
            这种简单直接的方式，是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除*/
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
        .tablist .ul-li input[type='checkbox']+label::before {
            content: '\a0';
            /*不换行空格*/
            display: inline-block;
            vertical-align: 0.2em;
            width: 1em;
            height:1em;
            margin-right: .2em;
            border-radius: .2em;
            background: #fff;
            /*复选框的背景色*/
            text-indent: 0.15em;
            line-height: 0.65;
            /* 放到皮肤中设置 
            border: 1px solid #DCE4FD;
            border-radius: 50%; */
        }

        /*皮肤样式*/
        .tablist-default .tab-title{
            border-bottom: 1px solid #E4E7ED;
        }
        .tablist-default .ul-list{
            border-top: 1px solid #E4E7ED;
        }
        .tablist-default .ul-list .ul-li {
            border-bottom: 1px solid #E4E7ED;
        }
        .tablist-default>.tab-title .layui-this{
            color: #1989FA;
            letter-spacing: 0;
            border-bottom: 2px solid #1989FA;
        }
        .tablist-default .ul-list .selected {
            color: #1989FA;
        }
        .tablist-default .ul-list .selected label{
            color: #1989FA;
        }
        .tablist-default .ul-li input[type='checkbox']+label::before{
            border: 1px solid #DCE4FD;
            border-radius: 50%;
        }
        .tablist-default .ul-li input[type='checkbox']:checked+label::before {
            content: '\2713';
            color:#fff;
            /*对号的 Unicode字符*/
            background: #52C41A;
            /*对号的颜色*/
        }
        /*选中时文本颜色*/
        .tablist-default .ul-li input[type='checkbox']:checked+label{
            /* color:#1989FA; */
        }
    </style>
    <script>
        var tablistTComponent = HwBase.extend({
            context: {},//上下文
            tpl: '<div class="tablist">'+
                    '<ul class= "tab-title">'+
                        '<% for(var item in obj.tabconf){%>'+
                            '<li class="<%= obj.tabconf[item].select && (obj.tabconf[item].select==true) ? \'layui-this\' :\'\' %>"><%= obj.tabconf[item].text %></li>'+
                        '<%}%>'+
                     '</ul>'+
                     '<div class="tab-content">'+
                        '<% for(var item in obj.tabconf){%>'+
                            '<div class="tab-item <%= obj.tabconf[item].select && (obj.tabconf[item].select==true) ? \'tab-show\' :\'\' %>">'+
                                '<ul class="ul-list" id="<%= obj.tabconf[item].id %>">'+
                                    '<% for(var listid in obj.listconf){%>'+
                                        '<% if(obj.listconf[listid].id==obj.tabconf[item].id){%>'+
                                            '<% for(var lidata in obj.listconf[listid].data){%>'+
                                               
                                                '<% if(obj.mutiCheck){ %>'+ 
                                                    '<li class="ul-li <%= obj.autoFirstCheck==true && lidata==0 ? \'selected\':\'\' %>">'+
                                                        '<input type="checkbox" id="<%= obj.listconf[listid].data[lidata][obj.showFields.idfield] %>" <%= obj.autoFirstCheck==true && lidata==0 ? \'checked\':\'\' %>>'+
                                                        '<label for="<%= obj.listconf[listid].data[lidata][obj.showFields.idfield] %>"><%= obj.listconf[listid].data[lidata][obj.showFields.textfield] %></label>'+
                                                    '</li>'+
                                                '<%}else{ %>'+
                                                    '<li class="ul-li <%= obj.autoFirstCheck==true && lidata==0 ? \'selected\':\'\' %>" id="<%= obj.listconf[listid].data[lidata][obj.showFields.idfield] %>">'+
                                                        '<%= obj.listconf[listid].data[lidata][obj.showFields.textfield] %>'+
                                                    '</li>'+
                                                '<%}%>'+
                                            '<%}%>'+
                                        '<%}%>'+
                                    '<%}%>'+
                                '</ul>'+
                            '</div>'+
                        '<%}%>'+
                     '</div>' +
                  '</div>',//模板
            container: {},//容器对象
            opts: {
                env:'dev',//dev or vmd
                container: '#container',//容器
                width: '',//宽度
                height: '',//高度
                skin: 'default',//默认皮肤
                mutiCheck: true,//是否开启多选
                autoFirstCheck: true,//是否默认选中第一行
                autoSearch: false,
                tabConf: [{ id: "kfdy", text: "开发单元", select: true }, { id: "fddy", text: "缝洞单元"}],//tab头配置
                dataStore: [{id:'kfdy',
                            data:[{dyid:"THAT13",dymc:"塔河AT13区块"},
                                  {dyid:"THAT14",dymc:"塔河AT14区块"}, 
                                  {dyid:"THAT15",dymc:"塔河AT15区块"}]},
                            {id:'fddy',
                            data:[{dyid:"THAT16",dymc:"塔河AT16区块"},
                                  {dyid:"THAT17",dymc:"塔河AT17区块"}, 
                                  {dyid:"THAT18",dymc:"塔河AT18区块"}]}
                           ],//tab数据集
                showFields: { idfield: 'dyid', textfield: 'dymc' },//显示字段和id字段
                tabChange: function (comp,e) { },//切换tab事件
                itemClick: function (comp,e) { }//每项点击事件
            },//默认配置项
            init: function (config) {
                //自动保存配置项
                this.__config = $.extend({}, this.opts, config);
                this.render()
                this.bind()
            },
            //可以使用get来获取配置项
            get: function (key) {
                return this.__config[key]
            },
            //可以使用set来设置配置项
            set: function (key, value) {
                this.__config[key] = value
            },
            bind: function () {
                var self = this;
                var parentNode = self.get('container') || $(document.body);
                //tab切换事件
                parentNode.find(".tab-title li").on('click',function(e){
                    var index = $("ul.tab-title li").index($(this));
                    $(this).addClass('layui-this').siblings().removeClass('layui-this');
                    $(".tab-content").children(".tab-item").removeClass('tab-show').eq(index).addClass('tab-show');
                    if(Object.prototype.toString.call(self.get('tabChange'))=='[object Function]'){
                        self.get('tabChange')(self,e);
                    }
                })

                parentNode.find(".tab-item li").on('click',function(e){
                    var target = $(this);
                    //多选情况
                    if(self.get('mutiCheck')){
                        var checkbox = target.find('input');
                        if(checkbox.is(":checked")){
                            target.removeClass("selected");
                            checkbox.prop("checked",false);
                        }else{
                            target.addClass("selected");
                            checkbox.prop("checked",true);
                        }
                    }
                    //单选情况
                    else{
                        target.addClass('selected').siblings().removeClass('selected');
                    } 
                    if(Object.prototype.toString.call(self.get('itemClick'))=='[object Function]'){
                        self.get('itemClick')(self,e);
                    }
                })
            },
             //用来实现刷新，只需要传入之前render时的数据里的key还有更新值，就可以自动刷新模板
            setTabdata : function(key,value){
              
            },
            render: function (tabconf,listconf) {
                var self = this;
                var data = {
                    mutiCheck: self.get("mutiCheck"),//是否开启多选
                    autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
                    autoSearch: self.get("autoSearch"),
                    showFields : self.get("showFields"),
                    tabconf : tabconf || self.get("tabConf"),
                    listconf : listconf || self.get("dataStore")
                }
               
                self.set("__renderData",data);
                var html = self.parseTemplate(self.tpl,data);
                var currentNode = $(html)

                //设置宽度、高度、和皮肤
                if(self.get('width')) currentNode.width(self.get('width'))
                if(self.get('height')) currentNode.height(self.get('height'))
                if(self.get('skin')) currentNode.addClass('tablist-' + self.get('skin') || 'default')

                self.set('__currentNode',currentNode)

                if(self.get('env')=='dev'){
                    self.container = this.get('container') || $(document.body);
                    self.container.append(currentNode)
                }else{
                    self.container = this.get('container');
                    self.container.update(html)
                }
            },
            //定义销毁的方法，一些收尾工作都应该在这里
            destroy: function () {
                var self = this
                //去掉自身的事件监听
                self.off()
                //删除渲染好的dom节点
                self.get('__currentNode').remove()
            }
        })

        $(function(){
            var tablist = new tablistTComponent({
                container:$(".111")
            })
            tablist.setChuckdata('kfdy',[{dyid:"123",dymc:"123"},
                                  {dyid:"456",dymc:"456"}, 
                                  {dyid:"789",dymc:"789"}])
        })
    </script>
</head>
   
<body>
        <div style="width:400px;height:500px;" class='111'>
            
         </div>
</body>

</html>